<template>
  <div>
      <div class="rightTop">
          终端实时信息|采集/设置终端实时信息
      </div>
      <div class="rightContent">
        <div style="float: left;">
           <div class="car" style="">车辆 :</div>
           <div class="xila">
               <el-select v-model="clientId" filterable placeholder="请选择或输入设备号" @change="clickItem" >
                        <el-option
                            v-for="item in list"
                            :key="item"
                            :label="item"
                            :value="item"
                            />
                </el-select>
          </div>
        </div>
        <div class="list">
          <el-button type="success" class="loads" @click="getCarlist">刷新列表</el-button>
        </div>
      </div>
    <div class="left_bottom">
        <div class="left_bottom_1">
          <div class="leftTitle">终端属性</div>
            <div class="audio">输入音频采样位数 :<span style="color: red; margin-left: 10px;"> {{audioBitDepth  }}</span></div>
            <div class="audio">输入音频声道数 : <span style="color: red;margin-left: 10px;">{{audioChannels  }}</span></div>
            <div class="audio">输入音频编码方式 : <span style="color: red;margin-left: 10px;">{{audioFormat  }}</span></div>
            <div class="audio">音频帧长度 : <span style="color: red;margin-left: 10px;">{{audioFrameLength  }}</span></div>
            <div class="audio">输入音频采样率 : <span style="color: red;margin-left: 10px;">{{audioSamplingRate  }}</span></div>
            <div class="audio">是否支持音频输出 : <span style="color: red;margin-left: 10px;">{{audioSupport  }}</span></div>
            <div class="audio">终端支持的最大音频物理通道 :<span style="color: red;margin-left: 10px;">{{maxAudioChannels  }}</span> </div>
            <div class="audio">终端支持的最大视频物理通道 : <span style="color: red;margin-left: 10px;">{{maxVideoChannels  }}</span></div>
            <div class="audio">视频编码方式 : <span style="color: red;margin-left: 10px;">{{videoFormat  }}</span></div>
            <div class="audio"> 
                <div style="float: left;margin-top: 7px;">车辆识别代号 :&nbsp;&nbsp;&nbsp; </div>
                <div class="el">
                  <el-input
                      v-model="IdentificationCode"
                      maxlength="17"
                      placeholder=""
                      show-word-limit type="text"
                    />
                </div>
            </div>
            <div class="audio"> 
                <div style="float: left; margin-top: 7px;">机动车号牌号码 :</div>
                <div class="el">
                  <el-input
                      v-model="PlateNumber"
                      maxlength="7"
                      placeholder=""
                      show-word-limit type="text"
                    
                    />
                </div>
            </div>
            <div class="audio"> 
                <div style="float: left;margin-top: 7px;">机动车号牌分类 :</div>
                <div class="el">
                  <el-select v-model="PlateType" filterable placeholder="请选择或输入设备类型" @change="clickType" >
                            <el-option
                                v-for="item in listType"
                                :key="item"
                                :label="item"
                                :value="item"
                                />
                        </el-select>
                </div>
            </div>
            <div class="button">
                  <div class="el-button1"> <el-button type="primary" round @click="getVehicleInfo">采集</el-button></div>
                  <div class="el-button2"> <el-button type="primary" round @click="setVehicleInfo" v-if="flag">设置</el-button></div>
            </div>
        </div>
      <div class="left_bottom_2">
        <div class="leftTitle">驾驶员信息</div>
          <div class="status">IC卡状态 :<span style="color: red; margin-left: 10px;"> {{status  }}</span></div>
          <div class="status">IC卡插入拔卡时间 : <span style="color: red;margin-left: 10px;">{{dateTime  }}</span></div>
          <div class="status">IC读取状态 : <span style="color: red;margin-left: 10px;">{{cardStatus  }}</span></div>
          <div class="status">驾驶员姓名长度 : <span style="color: red;margin-left: 10px;">{{name  }}</span></div>
          <div class="status">从业资格证编码 : <span style="color: red;margin-left: 10px;">{{licenseNo  }}</span></div>
          <div class="status">从业资格证发证机构名称 : <span style="color: red;margin-left: 10px;">{{institution  }}</span></div>
          <div class="status">证件有效期 :<span style="color: red;margin-left: 10px;">{{licenseValidPeriod  }}</span> </div>
          <div class="status">
                <div class="el-button2_1"> <el-button type="primary" round @click="getICInfo">采集</el-button></div>
          </div>
          <div class="button3">
            <div style="color: #ffffff;">下发文本信息:</div>
            <div><textarea  v-model="desc" rows="5" class="textareas"></textarea></div>
            <div style="float: right;padding: 0px 18px 0px 0px;"><el-button type="primary" round @click="sendText">发送</el-button></div>
          </div>
     
      </div>
    </div>
    
    <div class="right_top">
          <div class="rightTitle">实时定位</div>
          <RealTimeMap class="gd_com_map" :clientId="clientId" v-if="true"></RealTimeMap>
    </div>
  </div>
</template>
  
<script>
import api from "@/api/api";
import { ElNotification } from 'element-plus';
import RealTimeMap from "@/components/video/Real_Time_Map"
export default {
  components: { RealTimeMap },
  props: {

  },
  data: function () {
    return {
      title:"车辆信息",
      flag: false,
      clientId: "",
      list: "",
      audioBitDepth: "",//输入音频采样位数：0.8位 1.16位 2.32位
      audioChannels: "",//输入音频声道数
      audioFormat: "", //输入音频编码方式
      audioFrameLength: "",//音频帧长度
      audioSamplingRate: "",//输入音频采样率：0.8kHz 1.22.05kHz 2.44.1kHz 3.48kHz
      audioSupport: "",//是否支持音频输出
      maxAudioChannels: "",//终端支持的最大音频物理通道
      maxVideoChannels: "",//终端支持的最大视频物理通道
      videoFormat: "" ,//视频编码方式
      IdentificationCode: "",
      PlateNumber:"",
      PlateType:"",
      listType:[
        "危险品运输车",
        "大型普通货车",
        "中型普通货车",
        "小型普通货车",
        "专用运输车",
        "集装箱车",
        "大件运输车",
        "保湿冷藏车",
        "商品运输车",
        "仓棚式货车",
        "半挂牵引车",
        "重型普通货车",
        "特殊结构车",
        "重型厢式货车",
        "重型自卸货车",
        "重型混泥土车",
        "重型大货车",
        "重型仓栅式货车",
        "大型客车",
        "中型客车",
        "小型客车",
        "大型卧铺客车",
        "中型卧铺客车",
        "小型卧铺客车",
        "旅游大巴",
        "城际客运",
        "农村班线",
        "校车",
        "罐车",
        "牵引车",
        "挂车",
        "平板车",
        "环卫车",
        "混泥土搅拌车",
        "渣土车",
        "小型车",
        "出租车",
        "网约车",
        "教练车",
        "普通货车",
        "货车",
        "客车"
      ],
      status: "", //1：从业资格证 IC 卡插入（驾驶员上班）2：从业资格证 IC 卡拔出（驾驶员下班）。
      dateTime: "",//插卡/拔卡时间 YY-MM-DD-hh-mm-ss； 
      cardStatus: "",//0：IC 卡读卡成功； 1：读卡失败，原因为卡片密钥认证未通过；2：读卡失败，原因为卡片已被锁定； 3：读卡失败，原因为卡片被拔出； 4：读卡失败，原因为数据校验错误。 
      name: "",//驾驶员姓名长度 
      licenseNo: "",//从业资格证编码
      institution: "",//从业资格证发证机构名称 
      licenseValidPeriod: "",//证件有效期 
      desc: '',
    }
  },
  mounted() {
    this.getCarlist();
   
  },
  methods: {
    getVehicleInfo(){
      this.getAVAttribute(this.clientId); 
      api.getVehicleInfo(this.clientId).then(res=>{
        if(res.code==0){
          this.IdentificationCode=res.data[0].replace(/\x00/g, ''),
          this.PlateNumber=res.data[1].replace(/\x00/g, ''),
          this.PlateType=res.data[2].replace(/\x00/g, '')
          this.flag=true;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    setVehicleInfo(){
      api.setVehicleInfo(this.clientId,this.IdentificationCode,this.PlateNumber,this.PlateType).then(res=>{
        if(res.code==0){
          ElNotification({ title: '成功', message: '设置车辆信息成功', type: 'success', })
        }else{
          ElNotification({ title: '失败', message: res.msg, type: 'error', })
        }
      });
    },
    getICInfo(){
      api.getICInfo(this.clientId).then(res=>{
        if(res.code==0){
          ElNotification({ title: '成功', message: '获取车辆信息成功', type: 'success', })
          if(res.data.dateTime!=""){
              this.status=res.data.status==1?"驾驶员上班":"驾驶员下班",
              this.dateTime=this.formatDate(res.data.dateTime),
              this.cardStatus=this.getCardReadResultReason(res.data.cardStatus),
              this.name=res.data.name,
              this.licenseNo=res.data.licenseNo,
              this.institution=res.data.institution,
              this.licenseValidPeriod=res.data.licenseValidPeriod
          }
        }else{
          ElNotification({ title: '失败', message: res.msg, type: 'error', })
        }
      })
    },
    sendText(){
      api.setText(this.clientId,this.desc).then(res=>{
        if(res.code==0){
          ElNotification({ title: '成功', message: '下发文本成功', type: 'success', })
        }else{
          ElNotification({ title: '失败', message: res.msg, type: 'error', })
        }
      })
    },
    getCarlist() {
      api.getCarsList().then(res => {
        
          this.list = res.data.intersectionList;
          this.clientId = res.data.intersectionList[0];
         
      }).catch(err => {
        console.log(err)
      })
    },
    clickItem(val) {
      this.clientId = val;
      this.getAVAttribute();
    },
    clickType(val) {
      this.type = val;
    },
    getAVAttribute(clientId){
      api.getAVAttribute(clientId).then(res=>{
          if(res.code==0){
            this.audioBitDepth= this.getaudioBitDepth(res.data.audioBitDepth),
            this.audioChannels=res.data.audioChannels,
            this.audioFormat=this.getaudioFormat(res.data.audioFormat),
            this.audioFrameLength=res.data.audioFrameLength,
            this.audioSamplingRate=this.getaudioSamplingRate(res.data.audioSamplingRate),
            this.audioSupport=this.getaudioSupport(res.data.audioSupport),
            this.maxAudioChannels=res.data.maxAudioChannels,
            this.maxVideoChannels=res.data.maxVideoChannels,
            this.videoFormat=this.getvideoFormat(res.data.videoFormat)
          }
      })
    },
    getaudioBitDepth(val){
      if(val===0){
        return "8位";
      }else if (val===1){
        return "16位";
      }else if (val===2){
        return "32位";
      }
    },
    getaudioFormat(val){
      if(val===0){
        return "保留";
      }else if (val===1){
        return "G.721";
      }else if (val===2){
        return "G.722";
      }else if (val===3){
        return "G.723";
      }else if (val===4){
        return "G.728";
      }else if (val===5){
        return "G.729";
      }else if (val===6){
        return "G.711A";
      }else if (val===7){
        return "G.711U";
      }else if (val===8){
        return "G.726";
      }else if (val===9){
        return "G.729A";
      }else if (val===10){
        return "DVI4_3";
      }else if (val===11){
        return "DVI4_4";
      }else if (val===12){
        return "DVI4_8K";
      }else if (val===13){
        return "DVI4_16K";
      }else if (val===14){
        return "LPC";
      }else if (val===15){
        return "S16BE_STEREO";
      }else if (val===16){
        return "S16BE_MONO";
      }else if (val===17){
        return "MPEGAUDIO";
      }else if (val===18){
        return "LPCM";
      }else if (val===19){
        return "AAC";
      }else if (val===20){
        return "WMA9STD";
      }else if (val===21){
        return "HEAAC";
      }else if (val===22){
        return "PCE_VOICE";
      }else if (val===23){
        return "PCM_AUDIO";
      }else if (val===24){
        return "AACLC";
      }else if (val===25){
        return "MP3";
      }else if (val===26){
        return "ADPCMA";
      }else if (val===27){
        return "MP4AUDIO";
      }else if (val===28){
        return "AMR";
      }else if (val){
        return "保留";
      }
    },
    getaudioSamplingRate(val){
      if(val===0){
        return "8kHz";
      }else if (val===1){
        return "22.05kHz";
      }else if (val===2){
        return "44.1kHz";
      }else if (val===3){
        return "48kHz";
      }
    },
    getaudioSupport(val){
      if(val===0){
        return "不支持";
      }else if (val===1){
        return "支持";
      }
    },
    getvideoFormat(val){
      if(val<=92&&val>=97){
        return "保留";
      }else if (val===98){
        return "H264";
      }else if (val===99){
        return "H265";
       }else if (val===100){
        return "AVS";
      }else if (val===101){
        return "SAVC";
      }else{
        return "保留";
      }
    },
   formatDate(dateString) {
      // 将日期字符串分割成年、月、日、时、分、秒六个部分
      const year = dateString.substring(0, 4);
      const month = dateString.substring(4, 6);
      const day = dateString.substring(6, 8);
      const hour = dateString.substring(8, 10);
      const minute = dateString.substring(10, 12);
      const second = dateString.substring(12, 14);
      // 构造Date对象
      const date = new Date(year, month - 1, day, hour, minute, second);
      // 构造格式化后的日期字符串
      const formattedDate = date.getFullYear() + '-' +
        String(date.getMonth() + 1).padStart(2, '0') + '-' +
        String(date.getDate()).padStart(2, '0') + ' ' +
        String(date.getHours()).padStart(2, '0') + ':' +
        String(date.getMinutes()).padStart(2, '0') + ':' +
        String(date.getSeconds()).padStart(2, '0');
      return formattedDate;
    },
   getCardReadResultReason(result) {
          let reason = '';

          switch (result) {
            case 0:
              reason = 'IC卡,读卡成功';
              break;
            case 1:
              reason = '读卡失败，原因为卡片密钥认证未通过';
              break;
            case 2:
              reason = '读卡失败，原因为卡片已被锁定';
              break;
            case 3:
              reason = '读卡失败，原因为卡片被拔出';
              break;
            case 4:
              reason = '读卡失败，原因为数据校验错误';
              break;
            default:
              reason = '未知原因';
              break;
          }

          return reason;
    }
  }

}


</script>
<style scoped>
.rightTop{
  border-bottom: 1px solid #fff ;
  height: 5vh;
  width:  88.7vw;
  line-height: 5vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;

}
.rightContent{
  height: 5vh;
  font-size: 20px;
  padding-left: 1vw;
  line-height: 5vh;
  width: 88.7vw;
  margin-top: 1vh;
  box-shadow: 0 0 4px #ddd;
  border-bottom: 1px solid #fff ;
  float: left;
}
.button{
  color: #ffffff;
  padding: 101px 0px 0px 100px;
}
.button2{
  color: #000;
  float: right;
  padding: 0px 18px 0px 0px;

}
.leftTitle{
  width: 5vw;
  color: #000;
  box-shadow: 0 0 4px #ddd;
  border-bottom: 1px solid #fff ;
  border-radius: 100px;
  text-align: center;
  background-color: #00BAFF;
}
.right_top{
 width:69.7%;
 float: left;
 height: 82vh;
 margin-top: 10px;
 box-shadow: 0 0 4px #ddd;
 border-bottom: 1px solid #fff ;
 margin-left: 2vw;
}
.rightTitle{
  width: 5vw;
  color: #000;
  box-shadow: 0 0 4px #ddd;
  border-bottom: 1px solid #fff ;
  border-radius: 100px;
  text-align: center;
  background-color: #00BAFF;
 
  position: absolute;
  z-index: 999;
}
.gd_com_map {
  
    width: 100%;
    height:100%;
    position: relative;
}
.button3{
 clear: left;
  color: #000;
  margin-left: 12%;
 
}
.textareas{
  background-color: transparent;
  padding: 0px 0px 0px 0px;
  width: 320px;
  height: 77px;
  color: #000;
}
.el-button1{
  float: left;
  
}
.el-button2{
  float: left;
  margin-left: 100px;
}
:deep(.el-input .el-input__count .el-input__count-inner){
  background-color: transparent;
}
.el{
  float: left;
  width: 215px;
  margin-left: 13px;
  margin-top: 5px;
}
.audio{
  color: #000;;
  padding: 5px 0px 0px 50px;
}


.status{
  color: #000;;
  padding: 0px 0px 0px 50px;
}


.left_bottom{
 
  float: left;
  width: 28%;
  margin-top: 10px;
}
.left_bottom_1 {
  width: 100%;
  height: 43vh;
  text-align: left;
  box-shadow: 0 0 4px #ddd;
  border-bottom: 1px solid #fff ;

}
.left_bottom_2{
  width: 100%;
  height: 38vh;
  text-align: left;
  box-shadow: 0 0 4px #ddd;
  border-bottom: 1px solid #fff ;
  margin-top: 10px;
}
.Customize_head {
  width: 100%;
}

.app {
  height: 100vh;
  background-image: url("../../../assets/img/pageBg.png");
}




:deep(.el-button) {
  border: #01b2c5;
  color: white;
}

.loads {
  background-color: #01b2c5;
}

.plays {
  background-color: #01b2c5;
}

.car {
  text-align: center;
  float: left;
  color: #000;
}

.box {
  margin-top: 10px;
  margin-left: 1%;
  width: 24%;
  height: 75px;
  float: left;
}

.kongzhi {
  margin-left: 10px;
  line-height: 60px;
}

.xila {
  float: left;
  text-align: center;
  height: 60px;
}

.xilabi {
  line-height: 60px;
  margin-left: 10px;
  margin-top: 15px;
  width: 140px;
  background-color: #333736;
}

.el-button--primary {
  --el-button-border-color: #333736;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.buttons {
  margin-left: 10px;
  float: left;
  text-align: center;
  height: 60px;
}

.play {
  line-height: 60px;
  width: 100px;
  float: left;
}

.list {
  width: 100px;
  float: left;
  margin-left: 2vw;
}
:deep(.el-input__wrapper){
   background-color: transparent;
}
:deep(.el-input__inner){
    color:#000;
}
</style>




  